Version: 1.3 | Release Date: 7th September 2015

Follow the steps below to get started with your Site Template:

  1. Open the Package/HTML Folder to find all the Template Files
  2. Make sure you upload the required files/folders listed below:
    • HTML/css - Extra Stylesheets Folder
    • HTML/fonts - in fonts folder we add 2500+ font icons
    • HTML/images - Images Folder
    • HTML/js - Javacripts Folder
    • HTML/medical-guide.css - Main Stylesheet File you can also rename it to style.css (for wordpress)
    • HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  3. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Medical Guide follows a simple coding structure. here is the sample:


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<base href="" >

<!-- Basic Page Needs

     ================================================== > 
	 <meta charset="utf-8">
	 
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
     <title>Medical Guide</title>
    
     <meta name="description" content="">
    
     <meta name="keywords" content="">
    
     <meta name="author" content="">

	 
	 <!-- Mobile Specific Metas
    
     ================================================== -->
    
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    
     
	 
	 
    <!-- CSS
    
     ================================================== -->



	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	<div id="wrap">

		<!-- Top Bar
		============================================= -->
		<div class="top-bar">

			...

		</div>
		
		<!-- Header
		============================================= -->
		<header class="header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<div class="content">

					<!-- Sections inner content goes here -->

		</div>

		<!-- Footer
		============================================= -->
		<footer class="footer">

			<div class="container">

				<!-- Footer Inner
				============================================= -->
			

			</div>

		</footer>

	</div>

</body>
</html>

Layout Settings

This Theme Supports both Boxed & Wide Layouts. Adding the class .boxed-layout to the <body> will turn your website into a Boxed Layout:

<body class="boxed-layout">

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply remove id="preloader" right after the start tag of <body>. Also you need to remove javascript code written in scripts.js file placed in js folder.

<div id="preloader"><div class="pulse"></div></div>

How to use CSS / JS files

CSS and JS both are important part of the website. we've included all the plugins css/js inside medical-guide.css and custom.js files with proper commenting.

medical-guide.css Inside HTML > CSS you can find medical-guide.css which contains all the css.

<link rel="stylesheet" href="css/medical-guide.css">

Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as Medical Guide based on bootstrap 3 it is recommended to include bootstrap.css file right after medical-guide.css file.

<link rel="stylesheet" href="css/bootstrap.css">

Color.css Inside HTML > CSS you can find default-color.css which is compulsory for website's color scheming. To understand more please refer color schemes section.

<link rel="stylesheet" href="css/default-color.css">

main banner css Inside HTML > css you can find extralayers.css and settings.css both are files the part of index.html and index2.html banner.

<link rel="stylesheet" href="css/extralayers.css">
<link rel="stylesheet" href="css/settings.css">

Mobile Menu css Inside HTML > CSS you can find jquery.mmenu.all.css and demo.css both are compulsory for website's mobile menu layout.

<link rel="stylesheet" href="css/jquery.mmenu.all.css">
<link rel="stylesheet" href="css/demo.css">

custom.js Inside HTML > JS you can find custom.js which contains all the plugins files's code we've used in website.

<script src="js/custom.js"></script>

main banner js Inside HTML > JS you can find jquery.themepunch.revolution.min.js and jquery.themepunch.tools.min.js both are files the part of index.html and index2.html banner.

<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>

Mobile Menu js Inside HTML > JS you can find jquery.mmenu.min.all part of mobile menu layout.

<script src="js/jquery.mmenu.min.all.js"></script>

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the css/default-color.css file & you are good to go. Follow these quick steps to get going:

Note Please refer README.txt file inside css > theme-colors for color css.

  1. Make sure you add the fonts/medical-guide-icons.css stylesheet in your head after the bootstrap.css stylesheets.

    <head>

	...

	<link rel="stylesheet" href="fonts/medical-guide-icons.css" type="text/css" />


	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="css/default-color.css" type="text/css" />

	...

</head>
  2. Now simply change the Codes according to your requirements.

Changing Fonts

Change your Fonts on the Fly as we have included fonts in medical-guide.css uses 3 Fonts namely: Raleway, Droid & Source Sans Pro from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,800,900,400,300);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic);

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Smooth Scroll

you can easly change the scroll Speed and Distance view the bottom image we point out the Scroll Speed Time and Scroll Distance. you can find this script in custom.js file.

js files for smooth scroll

<script src="js/scroll-desktop.js"></script>
<script src="js/scroll-desktop-smooth.js"></script>

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

  • gZip Compression & Browser Caching

    This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

    gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this unnecessary. Resize it to 300px x 200px
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.

  • CSS & jQuery Minifications

    It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
    For CSS use CSS Minifier and For Javascript use Javascript Minifier.

  • Content Delivery Network

    You can use a CDN to further speed up your website. You can use the CDn to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.

  • Fast Web Hosting Servers

    A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header Types

You can choose between 2 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class Features Code Example
Default [.header] Header with a rounded Boxed navigation with top bar. 
<header class="header">
	...
</header>
.header2 Header with a full background-color with icon navigation. 
<header class="header header2">
	...
</header>

Navigation Drop Menu

Try using the Following code for navigation drop menu:

<nav class="menu-2">
	<ul class="nav wtf-menu>
	
		<!-- Simple Navigation Link ================================================== -->
		<li><a href="index.html">Home</a></li>
		
		
		<!-- Single Drop Down ================================================== -->
		<li class="parent"><a href="#.">Home</a>
			<ul class="submenu">
				<li><a href="#.">Home One<a></li>
				<li><a href="#.">Home Two<a></li>
				<li><a href="#.">Home Three<a></li>
			</ul>
		</li>
		
		
		<!-- Double Drop Down ================================================== -->
		<li class="parent"><a href="#.">Home</a>
			<ul class="submenu">
				<li><a href="#.">Home One<a></li>
				<li><a href="#.">Home Two<a></li>
				<li><a href="#.">More Home Styles<a>
					<ul class="submenu">
						<li><a href="#.">Home Three<a></li>
						<li><a href="#.">Home Four<a></li>
						<li><a href="#.">More Five<a></li>
					</ul>
				</li>
			</ul>
		</li>
		
		
	</ul>
</nav>

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Helper Classes

We have created some really useful helper classes for you. You can see all of them in medical-guide.css starting from line #16.

Slider Types & their Options

Medical Guide includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider
  • Owl Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

OWL Carousel

You can read the OWL Carousel Detail here.

Read OWL Carousel Detail

Post Types

You can use a 5 different types of Post Types:

Portfolio Setup

Medical Guide provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<div id="filters-container" class="cbp-l-filters-list">

	<div data-filter="*" class="cbp-filter-item-active cbp-filter-item cbp-l-filters-list-first">All Departments</div>
	<div data-filter=".technology" class="cbp-filter-item">Advanced Technology</div>
	<div data-filter=".facilities" class="cbp-filter-item">Free Facilities</div>
	<div data-filter=".dental" class="cbp-filter-item">Medical Dental</div>
	<div data-filter=".kids" class="cbp-filter-item cbp-l-filters-list-last">Kids Care</div>

</div>

Setting up Portfolio Items:

<div id="grid-container2" class="cbp main-gallery">
	
	
			<!-- For Image ================================================== > 
			<div class="cbp-item technology motion">
			    <a class="gallery-sec fancybox photo-icon" href="images/gallery/img.jpg" data-fancybox-group="gallery">
					
					<div class="image-hover img-layer-slide-left-right">
						<img src="images/gallery/img.jpg" alt="">
						<div class="layer"><i class="icon-image2"></div>
					</div>
					
					<div class="detail">
						<h6>  ...  </h6> 
						<span>  ...  </span> 
					</div>
					
			    </a>	
			</div>
			
			
			<!-- For Video ================================================== > 
			<div class="cbp-item kids motion">
			    <a class="gallery-sec fancybox-media video-icon" href="video url here">
					
					<div class="image-hover img-layer-slide-left-right">
						<img src="images/gallery/img.jpg" alt="">
						<div class="layer"><i class="icon-video2"></div>
					</div>
					
					<div class="detail">
						<h6>  ...  </h6> 
						<span>  ...  </span> 
					</div>
					
			    </a>	
			</div>
			
			
	
</div>

Introduction

Medical Guide boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Medical Guide:

  • Appointment Form
  • Testimonials
  • Columns
  • Counters
  • Icon Boxes
  • Galleries
  • Headings
  • Icon Lists
  • Labels
  • Fancybox
  • Maps with Direction
  • Navigations
  • Paginations
  • Pricing Tables
  • Process Steps
  • Blockquotes
  • Responsive
  • Sections
  • Social Icons
  • Styled Icons
  • Tables
  • Tabs
  • Toggles

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files.

Version 1.3

Version 1.4 8 February, 2016 

- Added: Add new home page option
- Added: Add new slider

Version 1.3 6 November, 2015 

- Fixed: Some Minor Tweaks
- Added: Add PSD Files

Version 1.2 22 September, 2015 

- Fixed: Some Minor Tweaks
- Added: Add Font icons in Font Folder

Released on 7th September, 2015 

- Released Medical Guide Template

HTML Structure